<script setup>
import { ref, computed } from 'vue';

import JsonEditor from './components/JsonEditor/index.vue';
import OptionEditor from './components/OptionEditor/index.vue';

</script>

<template>
  <div class="layout">
    <div class="layout-content">
      <div class="editor-wrapper__option">
        <OptionEditor></OptionEditor>
      </div>
      <div class="editor-wrapper__json">
        <JsonEditor></JsonEditor>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .layout {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;

    .layout-content {
      width: 100%;
      flex: 1 0 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .editor-wrapper__option {
        flex: 1 0 0;
        height: 100%;
      }

      .editor-wrapper__json {
        width: 50%;
        height: 100%;
      }
    }
  }
</style>
